* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
}
ul,ol,li{
  list-style: none;
}
html,body {
  width: 100%;
  height: 100%;
}

.blank{
  width: 100%;
  height: 120px;
}
/* 头一 */
.header_1 {
  margin: 0 auto;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9989;
}
.head {
  width: 100%;
  height: 36px;
  background-color: #222222;
  margin: 0 auto;
}
.head_1{
  width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head_1 > ul {
  color: #fff;
  font-size: 13px;
}
.head_1 > ul > li {
  color: #fff;
  font-size: 13px;
}

.head_1 > .left_1 {
  display: flex;
}
.head_1 > .left_1 > li {
  padding: 10px;
}
.head_1 > .left_1 > li > a{
  text-decoration:none;
  color: #fff;
}
.head_1 > .right_1 {
  display: flex;
} 
.head_1 > .right_1 > li {
  padding: 0 15px;
  border-right: 1px solid #fff ;
}
.head_1 > .right_1 > li > a {
  text-decoration:none;
  color: #fff;
}
.head_1 > .right_1 > li:nth-child(2){
  display:flex;
}
.head_1 > .right_1 > li:nth-child(2) >p{
  display: none;
}
.head_1 > .right_1 > li:nth-child(2) >p > a {
  text-decoration:none;
  color: #FFF;
  display: inline;
}
.head_1 > .right_1 > li:nth-child(2) >p.active{
  display: block;
}
.head_1 > .right_1 > li:nth-child(4) {
  border-right:none;
}
/*  头nav */
.n-head_2{
  width: 100%;
  height: 84px;
  background-color: white;
}
.head_2{
  width: 1300px;
  height: 84px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.head_2 > .logo_2 {
  width: 238px;
  height: 50px;
}
.head_2 > .logo_2 > img {
  width: 238px;
  height: 100%;
}
.head_2 > .centre {
  flex: 1;
  width: 560px;
}
.head_2 > .centre > ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.head_2 > .centre > ul > li > a{
  text-decoration:none;
  color: #222222;
  font-size: 13px;
}
.head_2 > .centre > ul > li > a:hover{
  color: red;  
}
.head_2 > .right_2 {
  flex: 1;
  width: 160px;
}
.parent> input:first-of-type {
  width: 200px;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  outline: none;
}
/* 轮播图 */
.v-mainWarp {
  width: 100%;
  position: relative;
}
.app-banner {
  background-color: #eaeef1;
  position: relative;
  height: 606px;
  width: 100%;
}

.banner-warp {
  height: 100%;
  width: 100%;
}
.swiper-container {
  width: 100%;
  height: 606px;
} 

.swiper-container > .swiper-wrapper {
  width: 100%;
  height: 606px;
  
  margin: 0 auto;
} 
.swiper-container > .swiper-wrapper > .swiper-slide {
  display: flex;
  justify-content: center;
 
  overflow: hidden;
}
.swiper-container > .swiper-wrapper > .swiper-slide > img {

  height: 100%;
} 

/* 二级菜单 */
.app-banner-container {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  margin-left: 132px;
}

.app-banner-container > .menu-wrap {
  width: 220px;
  position: relative;
  pointer-events: auto;
  height: 541px;
  box-sizing: border-box;
}

.app-banner-container > .menu-wrap > .side-menu {
  background-color: #fff;
  border-radius: 6px;
  color: #000;
  width: 220px;
  margin: 24px 0;
  font-size: 14px;
  overflow: hidden;
  padding: 7px 3px 0;
  z-index: 100;
  pointer-events: auto;
  box-sizing: border-box;
}

.app-banner-container > .menu-wrap > .side-menu > .side-menu-scroll {
  height: 534px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

.side-menu-item {
  list-style: none;
  margin: 0;
  padding: 0 12px 0 20px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .2s ease;
  cursor: pointer;
}

.side-menu-item > div > span {
  opacity: 0.7;
}

.side-menu-item > img {
  width: 12px;
  height: 12px;
  border-style: none;
}

.menu-panel {
  z-index: 100;
  width: 747px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  border-radius: 6px;
  top: 0;
  left: 240px;
  background-color: #fff;
  pointer-events: auto;
  display: flex;
  padding: 28px 8px 28px 22px;
  box-sizing: border-box;
  display: none;
}

.menu-panel-main {
  padding-left: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-panel-main > div {
  pointer-events: none;
}

.menu-panel-main > div > p {
  font-size: 17px;
}

.menu-panel-main > div > ul {
  display: flex;
  width: 100%;
  justify-items: space-evenly;
  flex-wrap: wrap;
  height: 100%;
}

.menu-panel-main > div > ul > li {
  display:flex;
  align-items: center;
  padding-right: 30px;
  margin-right: 15px;
  width: 190px;
  margin: 10px 0  10px 0 ;
}

.menu-panel-main > div > ul > li > img {
  width: 54px;
  height: 54px;
  display: block;
  pointer-events: none;
}

.menu-panel-main > div > ul > li > span {
  font-size: 13px;
  margin-left: 8px;
  font-weight: 400;
  opacity: 0.85;
  pointer-events: none;
}
/* 中间部分*/
.maxen {
  width: 100%;
  background-color: #f7f7fa;
}
/* 登录注册区 */
.en_enter{
  width: 100%;
  overflow: hidden;
}
.enter {
  width: 1300px;
  height: 100px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  margin: 50px auto;
}
.enter > .e_left {
  flex: 1;
  height: 100px;
}
.enter > .e_left > img {
  width: 100%;
  height: 100%;
}
.enter > .e_tu {
  width: 700px;
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-left:  1px solid #8c8c8e;
  border-right: 1px solid #8c8c8e;
}
.enter > .e_tu > li {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.enter > .e_tu > li > img {
  width: 30%;
  height: 30%;
}
.enter > .e_right {
  flex: 1;
  height: 100px;

  display: flex;
  justify-content: center;
  align-items: center;
}
/* 图片列表部分 */
.picshow{
  width: 1300px;
  height: 180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.picshow > li{

  width: 23%;
  height: 180px;
  border-radius: 8px;
}
.picshow > li > img {
  width: 100%;
  height: 100%;
}
/* 限时秒杀 */
.seckill {
  width: 1300px;
  height: 420px;
  margin: 40px auto;
}
.seckill > .seckilltime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
}
.seckill > .seck_right {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.seckill > .seck_right > .dingshiqi {
  width: 19%;
  height: 320px;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  border: 1px solid white;
}
.seckill > .seck_right > .dingshiqi > div {
  width: 90%;
  height: 18%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #8c8c8e;
  padding: 10px;
}
.seckill > .seck_right > .seckrightss {
  width: 80%;
  display: flex;
  justify-content: space-between;
  height: 320px;
}
.seckill > .seck_right > .seckrightss > li {
  width: 24%;
  height: 100%;
  border: 1px solid white;
  border-radius: 10px;
}
.seckill > .seck_right > .seckrightss > li > .planimg {
  width: 100%;
  height: 60%;
}
.seckill > .seck_right > .seckrightss > li > .planimg > img {
  width: 100%;
  height: 100%;
}
.seckill > .seck_right > .seckrightss > li > h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 10px 20px;
}
.seckill > .seck_right > .seckrightss > li > .border {
  display: flex;
  justify-content: space-around;

}
.seckill > .seck_right > .seckrightss > li > .border > .jindu {
  width: 150px;
  height: 10px;
  background-color: tomato;
  border: 1px solid #f7f7fa;
  border-radius: 10px;
  margin-top: 10px;
}
.seckill > .seck_right > .seckrightss > li > .border > p {
  color: #8c8c8c;
  margin-top: 9px;
  font-size: 10px;

}
.seckill > .seck_right > .seckrightss > li > .plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px  20px;
}
.seckill > .seck_right > .seckrightss > li > .plan >p > span:nth-child(1) {
  color: red;
}
.seckill > .seck_right > .seckrightss > li > .plan >p > span:nth-child(2) {
  color: #8c8c8c;
  font-size: 10px;
  text-decoration:line-through;
}
.seckill > .seck_right > .seckrightss > li > .plan > div {
  width: 80px;
  height: 30px;
  border: 1px solid #8c8c8c;
  border-radius: 50px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 30px;
}
/*  热卖专区 */
.hottime {
  width: 1300px;
  margin: 0 auto;
}
.hottime > .hot_right {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.hottime > .hot_right > li {
  width: 24%;
  height: 160px; 
  display: flex;
  align-items: center;
  border: 1px solid white;
  margin-bottom: 10px;
  border-radius: 20px;
}
.hottime > .hot_right > li > .hot_left {
  width: 160px;
  height: 160px;
  background-size: cover;
  background-position: 130% 50%;
  background-repeat: no-repeat;
}
.hottime > .hot_right > li > .hot_right {
  width: 160px;
  display: flex;
  flex-direction: column;
  padding-right: 10px;
}
.hottime > .hot_right > li > .hot_right >p:nth-child(1){
  font-size: 20px;
  font-weight: 800;
  padding: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
.hottime > .hot_right > li > .hot_right >p:nth-child(2){
  font-size: 13px;
  color: #8c8c8e;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.hottime > .hot_right > li > .hot_right >p:nth-child(3) {
  font-size: 20px;
  color: red;
  padding: 10px;
}
.hottime > .hot_right > li > .righttop {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 30px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 30px;
  font-size: 10px;
}
.hottime  > .tonglan {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.hottime  > .tonglan > li  {
  width: 640px;
  height: 275px;
  border: 1px solid #000;
  border-radius: 10px;
}
.hottime > .tonglan > li >img {
  width: 100%;
  height: 100%;
}
/*  oppo 专区 */
.opponic{
  width: 1300px;
  margin: 0 auto;
  margin-bottom: 80px;
}
.opponic > h3 {
  height: 50px;
  line-height: 50px;  
}
.opponic > .oppolist {
  height: 60px;
  display: flex;
  align-items: center;
}
.opponic > .oppolist >li {
  padding-right: 40px;
  text-align: center;
}
.opponic > .oppolist >li > a{
  text-decoration:none;
  color: #000;
}
.opponic > .oppolist >li > a:hover{
  text-decoration:none;
  color: red;
}
.opponic > .oppolist > li:nth-child(1){
  font-weight: 900;
}
.opponic > .oppoimg {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.opponic > .oppoimg >li{
  border-radius: 10px;
  width: 19%;
  height: 300px;
  margin-right: 1%;
  margin-top: 20px;
}
.opponic > .oppoimg >li >img {
  width: 100%;
  height: 60%;
}
.opponic > .oppoimg >li > p {
  text-align: center;
  padding: 5px;
}
.opponic > .oppoimg >li > p:nth-child(3) {
  width: 100px;
  margin: 0 auto;
  border: 1px solid orange;
}
.opponic > .oppoimg >li > p:nth-child(4) {
  color: red;
}
.opponic > .oppoimg >li:hover {
    margin-bottom: 5px;
    transition: all 0.2s linear;
    box-shadow: 2px 2px 5px 2px gray;
  
}
.opponic > .oppoimg > div {
  width: 39%;
  margin-top: 20px;
  margin-right: 10px;
  height: 300px;
  border: 1px solid white;
  border-radius: 10px;
}
.opponic > .oppoimg > div > img {
  width: 100%;
  height: 100%;
}
.opponic > .oppoimg > li:nth-child(4) {
  margin-right: 0;
}
/*  大底部 */
.footers {
  width: 100%;
  background-color: #fff;
}
.footers > .topfoot{
  width: 1300px;
  margin: 30px auto;
  height: 200px;
  border-bottom: 3px solid #222222;
}
.footers > .topfoot > ul {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  height: 150px;
  justify-content: space-around;
}
.footers > .topfoot > ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  width: 15%;
}
.footers > .topfoot > ul > li >img {
  padding: 10px;
}
.footers > .topfoot > ul > li > a {
  text-decoration:none;
  color: #222222;
}
.footers > .bottomfoot {
  width: 1300px;
  height: 450px;
  margin: 0 auto;
  display: flex;
  border-bottom: 1px solid #222222;
}
.footers > .bottomfoot > ul {
  width: 15%;
}
.footers > .bottomfoot > ul > li {
  padding: 10px;
  color: #8c8c8e;
}
.footers > .bottomfoot > ul > li:nth-child(1) {
  color: #212121;
}
.footers > .bottomfoot >.rightfoot > div {
  width: 200px;
  height: 50px;
  border-radius: 60px;
  background-color: #222222;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
.footers > .bottomfoot >.rightfoot  > p {
  padding: 10px;
  text-align: center;
}
.footers > .textfoot {
  width: 1300px;
  height: 100px;
  margin: 0 auto;
  font-size: 10px;
  color: #8c8c8e;
}
.footers > .textfoot > ul {
  display: flex;
  padding: 13px;
}
.footers > .textfoot > ul > li {
  border-right: 1px solid #8c8c8e;
  padding: 0 10px;
}
.footers > .textfoot > ul > li:nth-child(1) {
  padding-left: 0;
}
.footers > .textfoot > ul > li:nth-child(5) {
  border-right: 0;
}
.footers > .textfoot > p::before{
  content:url(https://dsfs.oppo.com/oppo/images/common/police-25797632ad.png?x-oss-process=image/format,webp);
  padding: 10px;
  vertical-align:middle;
}